<nav class="wiki-navbar navbar navbar-light navbar-expand-lg sticky-top pr-4">
  <div class="navbar-brand-container">
    <a class="navbar-brand" alt="Go to home page" data-prefix="{{ url_prefix }}"
      href="{{ url_prefix or "" }}{{ home_page or " /" }}">
      {%- if light_mode_logo -%}
      <img alt="Logo" data-alt-src="{{ dark_mode_logo }}" src='{{ light_mode_logo }}'>
      {%- elif dark_mode_logo -%}
      <img alt="Logo" data-alt-src="{{ light_mode_logo }}" src='{{ dark_mode_logo }}'>
      {%- elif brand_html -%}
      {{ brand_html }}
      {%- else -%}
      <span>{{ (frappe.get_hooks("brand_html") or [_("Home")])[0] }}</span>
      {%- endif -%}
    </a>
    {% if spaces and spaces|length > 0 %}
    <div id="navbar-dropdown">
      <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"
        stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
        <polyline points="6 9 12 15 18 9"></polyline>
      </svg>
    </div>
    <div id="navbar-dropdown-content" class="hide">
      <div class="app-switcher">
        {% for space in spaces %}
        <a href="/{{ space.route }}" class="space-link">
          <img src="{{space.app_switcher_logo or '/app-icon.png'}}" alt="{{space.space_name}} logo" />
          <span>
            {{ space.space_name }}
          </span>
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </div>

  {% if navbar_search %}
  <div class="d-lg-none mobile-search-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
      <circle cx="11" cy="11" r="8"></circle>
      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    </svg>
  </div>
  {%- endif -%}

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse wiki-navbar-container" id="navbarSupportedContent">
    {% include "wiki/doctype/wiki_page/templates/navbar_items.html" %}
  </div>
  <div class="form-group mb-0 hide" id="language-switcher">
    <select class="form-control"></select>
  </div>
</nav>


{% if navbar_search %}
<!-- separated the modal to avoid being unresponsive when inside <nav> -->
<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel"
  aria-hidden="true">
  <div class="modal-dialog search-dialog" role="document">
    <div class="modal-content search-modal">
      <div class="modal-header">
        <div>
          <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
            fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.3-4.3"></path>
          </svg>
        </div>
        <input id="searchInput" type="search" class="form-control" placeholder="Search" />
      </div>
      <div class="modal-body">
        <div class="overflow-hidden search-dropdown-menu w-100" aria-labelledby="dropdownMenuSearch"></div>
      </div>
    </div>
  </div>
</div>

{% endif %}